<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 class="title">用户注册</h2>
      <el-form label-width="100px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>

        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="registerForm.gender">
            <el-radio label="男" value="1">男</el-radio>
            <el-radio label="女" value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 年龄 -->
        <el-form-item label="年龄" prop="age">
          <el-input type="number" v-model="registerForm.age" placeholder="请输入年龄"></el-input>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <!-- 家庭住址 -->
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="registerForm.address" placeholder="请输入家庭住址"></el-input>
        </el-form-item>

        <!-- 身份证照片上传 -->
        <el-form-item label="身份证照片" prop="identityCardUrl">
          <el-upload
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" />
          </el-dialog>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">注册</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import axios from "axios";
import qs from "qs";
import router from "@/router";

// 定义响应式数据
const registerForm = ref({
  username: '',
  password: '',
  gender: '',
  age: '', // 添加年龄字段
  phone: '',
  email: '',
  address: '',
  identityCardUrl: '',
});

// 上传图片相关变量的声明
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);

// 定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');

// 移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('删除成功!');
        }
      })
}

// 图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
  console.log(uploadFile);
}

// 表单验证成功后提交
const submitForm = () => {
  if (fileList.value.length == 0) {
    ElMessage.error('请上传图片!');
    return;
  }
  registerForm.value.identityCardUrl = fileList.value[0].response.data;
  console.log(fileList.value[0].response.data);
  let data = qs.stringify(registerForm.value);
  axios.post(BASE_URL + '/v1/user/save/normal', data).then((response) => {
    if (response.data.code == 200) {
      ElMessage.success('注册成功!');
      registerForm.value = {}; // 清空表单其他项数据
      router.push("/homepage"); // 注册完成跳转到首页
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

// 重置表单
const resetForm = () => {
  registerForm.value = {};
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff8e1;
}

.register-card {
  width: 500px;
  padding: 20px;
  border-radius: 10px;
  background-color: #ffecb3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #d48806;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.upload-demo {
  display: flex;
  justify-content: center;
}
</style>
